<template>
  <el-dialog
    v-model="dialogVisible"
    title="品类详情"
    width="800px"
    append-to-body
    @close="handleClose"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="品类编码">
        {{ data?.categoryKey || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="品类名称">
        {{ data?.categoryName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="行业分类">
        <el-tag :type="getIndustryTypeTag(data?.industryType)">
          {{ getIndustryTypeText(data?.industryType) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="设备类型">
        <el-tag :type="getDeviceTypeTag(data?.deviceType)">
          {{ getDeviceTypeText(data?.deviceType) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="品类图标">
        <div class="category-icon">
          <img v-if="data?.iconUrl" :src="data.iconUrl" style="width: 60px; height: 60px; border-radius: 4px;" />
          <span v-else>-</span>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="data?.status === '1' ? 'success' : 'danger'">
          {{ data?.status === '1' ? '启用' : '停用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="属性数量">
        {{ data?.propertyCount || 0 }} 个
      </el-descriptions-item>
      <el-descriptions-item label="功能数量">
        {{ data?.functionCount || 0 }} 个
      </el-descriptions-item>
      <el-descriptions-item label="事件数量">
        {{ data?.eventCount || 0 }} 个
      </el-descriptions-item>
      <el-descriptions-item label="产品数量">
        {{ data?.productCount || 0 }} 个
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">
        {{ data?.createTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间" :span="2">
        {{ data?.updateTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="品类描述" :span="2">
        {{ data?.description || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="技术规格" :span="2">
        {{ data?.specification || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ data?.remark || '-' }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 组件属性
interface Props {
  visible: boolean
  data?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  data: null
})

// 组件事件
const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()

// 响应式数据
const dialogVisible = ref(false)

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal
  },
  { immediate: true }
)

// 获取行业分类标签样式
const getIndustryTypeTag = (type: string) => {
  switch (type) {
    case 'smart_home': return 'primary'
    case 'industrial': return 'success'
    case 'smart_city': return 'warning'
    case 'agriculture': return 'info'
    case 'healthcare': return 'danger'
    case 'transportation': return 'primary'
    default: return 'primary'
  }
}

// 获取行业分类文本
const getIndustryTypeText = (type: string) => {
  switch (type) {
    case 'smart_home': return '智能家居'
    case 'industrial': return '工业物联'
    case 'smart_city': return '智慧城市'
    case 'agriculture': return '智慧农业'
    case 'healthcare': return '智慧医疗'
    case 'transportation': return '智能交通'
    default: return '未知'
  }
}

// 获取设备类型标签样式
const getDeviceTypeTag = (type: string) => {
  switch (type) {
    case 'sensor': return 'success'
    case 'actuator': return 'warning'
    case 'gateway': return 'primary'
    case 'controller': return 'info'
    case 'camera': return 'danger'
    default: return 'primary'
  }
}

// 获取设备类型文本
const getDeviceTypeText = (type: string) => {
  switch (type) {
    case 'sensor': return '传感器'
    case 'actuator': return '执行器'
    case 'gateway': return '网关'
    case 'controller': return '控制器'
    case 'camera': return '摄像头'
    default: return '未知'
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>